import React from 'react';
import { Box, Drawer, styled } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import { useAuth } from "contexts/AuthContext";
import PortalCloseButton from 'components/atoms/PortalCloseButton';
import { AdminContent, UserContent } from './DrawerContent';

// Styled AppBar component
const StyledAppBar = styled(Box)(() => ({
  position: 'sticky',
  top: 0,
  left: 0,
  right: 0,
  zIndex: 1200,
  visibility: 'visible !important',
  transform: 'none !important',
  background: 'none !important',
  backgroundColor: 'none !important',
  boxShadow: 'none !important',
  backdropFilter: 'none !important',
  marginTop: 0,
}));

// Styled Toolbar for both light and dark modes - matching the one from TopIcons
const StyledToolbar = styled(Box)(({ theme, darkMode }) => ({
  padding: '8px 16px',
  margin: 0,
  width: '100%',
  justifyContent: 'space-between',
  alignItems: 'center',
  display: 'flex',
  borderRadius: '10px',
  transition: 'all 0.3s ease',
  
  // Light Mode (Neumorphic)
  ...(!darkMode && { 
    backgroundColor: 'transparent',
    boxShadow: 'inset 2px 2px 5px rgba(223, 227, 238, 0.8), inset -2px -2px 5px rgba(255, 255, 255, 0.9)'
  }),
  
  // Dark Mode (TreeItems styling with black and dark cyan)
  ...(darkMode && {
    backgroundColor: 'transparent !important',
    background: 'linear-gradient(145deg, rgba(0, 10, 15, 0.9), rgba(0, 0, 0, 0.85))',
    boxShadow: 'inset 1px 1px 2px rgba(0, 0, 0, 0.4), inset -1px -1px 2px rgba(0, 255, 242, 0.08)',
  })
}));

const DashboardDrawerProtected = ({ 
  open, 
  toggleDashboardDrawerProtected, 
  darkMode = false, 
  placeBefore = false 
}) => {
  const navigate = useNavigate();
  
  // Safely destructure user with a default empty object
  const { user = {} } = useAuth();
  
  // eslint-disable-next-line
  const navigatePage = (url) => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  const navigateOpen = (path) => {
    if (path === 'toggleDashboardDrawerProtected') {
      toggleDashboardDrawerProtected();
    } else {
      navigate(path);
      toggleDashboardDrawerProtected(false);
    }
  };
  
  // Determine which content to render
  const renderContent = () => {
    if (user && user.role && (user.role === "admin" || user.role === "superadmin")) {
      return <AdminContent 
        isXs={true}
        placeBefore={placeBefore}
        darkMode={darkMode}
        navigateOpen={navigateOpen}
      />;
    } else {
      return <UserContent 
        isXs={true}
        placeBefore={false}
        darkMode={darkMode}
      />;
    }
  };
  
  // Only render Drawer component
  return (
    <Drawer
      anchor="left"
      open={open}
      onClose={() => toggleDashboardDrawerProtected(false)}
      variant="temporary"
      PaperProps={{
        sx: {
          zIndex: 9999,
          height: '100vh',
          width: 'auto',
          borderRadius: 0,
          backgroundColor: darkMode ? '#000' : '#fff',
          background: darkMode ? '#000' : '#fff',
        },
      }}
    >
      <StyledAppBar>
        <StyledToolbar 
          darkMode={darkMode}
          sx={{
            maxWidth: {
              xs: '100%',
              sm: '600px',
              md: '960px',
              lg: '1280px',
              xl: '1920px'
            },
            mx: 'auto',
            background: 'none !important',
            backgroundColor: 'none !important',
            boxShadow: 'none !important',
            backdropFilter: 'none !important'
          }}
        >
          {/* Spacer element to match the LogoComponent in TopIcons */}
          <Box sx={{ visibility: 'hidden', width: '200px' }}></Box>
          
          {/* Close button container - now matches the Hamburger button */}
          <Box sx={{ display: 'flex', alignItems: 'center' }}>
            <PortalCloseButton
              onClick={() => toggleDashboardDrawerProtected(false)}
              id="close-drawer-button"
              className="drawer-close-button"
              darkMode={darkMode}
              style={{ marginTop: 5 }}
              aria-label="Close"
            />
          </Box>
        </StyledToolbar>
      </StyledAppBar>
      <Box sx={{ 
        height: "100%", 
        p: 3, 
        pt: 10 
      }}>
        {renderContent()}
      </Box>
    </Drawer>
  );
};

export default DashboardDrawerProtected;